<template>
    <div class="q-bank">
        <Header></Header>
        <!-- <div class="banner">
            <div class="inner">
                <div class="title">
                    <p>试题总量:</p>
                </div>
                <div class="value">
                    <p v-for="i in 6">{{ i }}</p>
                </div>
            </div>
        </div> -->
        <div class="content-main">
            <div class="container">
                <div class="left-match">
                    <div class="nav">
                        <div class="top-nav">
                            <div class="left-title">
                                <p>分类:</p>
                            </div>
                            <div class="right-list">
                                <div :class="{ selected: i === 0 }" class="nav-item" v-for="(d, i) in navList">
                                    <p>{{ d.title }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="bottom-type">
                            <div @click="matchShowType = 'item'" class="item">
                                <el-icon color="#ccc" :class="{ selected: matchShowType === 'item' }" size="22"><Operation /></el-icon>
                            </div>
                            <div @click="matchShowType = 'box'" class="box">
                                <el-icon :class="{ selected: matchShowType === 'box' }" color="#ccc" size="22"><Grid /></el-icon>
                            </div>
                        </div>
                    </div>
                    <div class="match-list">
                        <MatchItem v-for=" in 6"></MatchItem>
                    </div>
                    <div class="page-control">
                        <el-pagination layout="prev, pager, next" :total="50" />
                    </div>
                </div>
                <div class="right-my-test">
                    <div class="title">
                        <p>我的练习</p>
                    </div>
                    <div class="img">
                        <img src="https://examzone.saikr.com/assets/lianxi_pic@2x-7ff21ed6.png" alt="" />
                    </div>
                    <div class="login-btn">
                        <el-button type="primary">立即登录</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="b">
            <img src="../../assets/image/banner.png" style="transform: scale(0.8); opacity: 0.7" />
        </div>
        <FixedMenu />
        <Footer></Footer>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import MatchItem from "@/components/q-bank/MatchItem.vue";

const matchShowType = ref("item");
const navList = [
    {
        title: "全部",
    },
    {
        title: "大英赛",
    },
    {
        title: "英语竞赛",
    },
    {
        title: "英语四六级",
    },
    {
        title: "其他",
    },
];
</script>

<style lang="scss" scoped>
.banner {
    width: 100vw;
    height: 450px;
    background: url("https://examzone.saikr.com/assets/tiku_banner@2x-534b302b.png") no-repeat;
    background-size: 1920px 450px;
    position: relative;
    .inner {
        width: 1025px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .title {
            font-size: 14px;
            color: #fff;
            line-height: 33px;
        }
        .value {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: fit-content;
            p {
                width: 20px;
                height: 30px;
                margin-left: 5px;
                color: #fff;
                font-size: 20px;
                background: rgba(255, 255, 255, 0.36);
                text-align: center;
                line-height: 30px;
            }
        }
    }
}
.content-main {
    margin-top: 30px;
    .container {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .left-match {
            flex-basis: 75%;
            .nav {
                border: 1px solid rgb(241, 241, 241);
                padding: 10px;
                border-radius: 10px;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                flex-direction: column;

                .top-nav {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    font-size: 14px;
                    margin-left: 10px;
                    margin-top: 10px;
                    .left-title {
                        color: #7f8792;
                    }
                    .right-list {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        color: #444950;
                        > .nav-item {
                            margin-left: 10px;
                            padding: 5px 10px;
                            p {
                                cursor: pointer;
                                &:hover {
                                    color: $main-color;
                                }
                            }
                        }
                        .selected {
                            background: #e1f2ff;
                            color: $main-color;
                            border-radius: 5px;
                        }
                    }
                }
                .bottom-type {
                    align-self: flex-end;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;
                    .box {
                        margin-left: 10px;
                    }
                    .selected {
                        color: #000;
                    }
                }
            }
            .match-list {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
            }
            .page-control {
                margin: 50px 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .right-my-test {
            flex-basis: 23%;
            border-radius: 20px;
            padding: 20px;
            border: 1px solid rgb(241, 241, 241);
            .title {
                font-size: 20px;
                margin-bottom: 10px;
            }
        }
        .login-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: -30px;
            button {
                background: $main-color;
            }
        }
    }
}
</style>
